<!DOCtype>
<html>
<head>
<title>{$article_title}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{$article_title}，php，技术博客，生活博客">
<meta name="robots" content="index">
<meta name="author" content="464171544@qq.com">
<meta name="keywords" content="{$article_title}，php博客，new一个对象，博客，php，闲人聚会，技术博客">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1027443_7shm16tdynr.css">
<link rel="stylesheet" href="/static/element/index.css">
<link href="/static/css/article.css" rel="stylesheet">
<link href="/static/markdowncss/techo.css" rel="stylesheet">
<link href="/static/markdown/src/css/monokai_sublime.css" rel="stylesheet">  
<script>
</script>
<style>
.to-top{z-index:999999999;cursor:pointer;position:fixed;right:20px;bottom:20px;width:40px;height:40px;background:#aaa;border-radius:50%;text-align:center;}
.to-top i{line-height:40px;color:#eee;font-size:25px;}
.nav-top{position:fixed;top:0;z-index:9999999999;}
.el-message{z-index:99999999999999999999999999999999999 !important}
</style>
</head>
<body>
<div id="box" v-cloak>
	<div class="article-bg">
		<!--弹幕  -->
		<div class="barrages">
			
		</div>
	</div>
	<div class="to-home" @click="toHome();"><i class="iconfont icon-shouye1"></i></div>
	<div class="content">
		<div class="article-box">
			<div class="article-title">
				<div class="article-title-msg">
					{{article.title}}
				</div>
				<div class="article-brief">
					<span class="article-time">{{article.create_time}}</span>
					<span>阅读数：{{article.see_num}}</span>
					<span>标签：<el-tag size="mini" type="warning">{{article.badge_name}}</el-tag></span>
				</div>
			</div>
			<div class="article-content markdown-body" v-html="article.content"></div>
		</div>
		<div class="article-eval">
			<div class="no-eval" v-if="!article.eval">
				亲~，该文章暂无开启评论功能哟~
			</div>
			<div class="evals">
				<p class="eval-toast">说点什么吧~</p>
				<div class="msg-box">
					<el-form :rules = "rules" ref="form" :model="eval">
						<el-row :gutter="5">
							<el-col :span="8">
								<el-form-item prop="sender">
									<el-input size="small" placeholder="昵称" v-model="eval.sender"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item prop="sender_email">
									<el-input size="small" placeholder="邮箱" v-model="eval.sender_email"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item prop="sender_web">
									<el-input size="small" placeholder="网址：https://wwww.gsmjb.com" v-model="eval.sender_web"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item prop="content">
							<el-input type="textarea" placeholder="这里输入你的评论内容~" v-model="eval.content" style="margin-top:10px;" :rows="6"></el-input>
						</el-form-item>
					</el-form>
					<div class="eval-btn-box">
						<el-button size="mini" type='info' @click="toEval('form');">发表评论</el-button>
					</div>
				</div>
			</div>
		</div>
		<div class="eval-nums">
			共有{{eval_num}}条评论
		</div>
		<ul class="eval-list">
			<li v-for="(item,key) in article_eval">
				<div class="eval-user">
					<img :src="item.sender_headimg" class="eval-user-header">
					<div class="eval-user-info">
						<div class="eval-user-nick">
							<a class="eval-user-nickname" :href="item.sender_web" target="top">{{item.sender}}</a>
							<el-tag type="info" size="mini" class="user-badge">{{item.sender_sys}}</el-tag>
							<el-tag type="info" size="mini" class="user-badge">{{item.sender_browser}}</el-tag>
							<a href="###" class="btn-replay" @click="replys(key,false)">{{item.reply_btn}}</a>
						</div>
						<div class="eval-user-time">
							{{item.create_time}}
						</div>
					</div>
					<div class="eval-msg" v-html="item.content">
					</div>
					<!--回复评论  -->
					<div class="msg-box" v-if="item.is_reply">
						<el-form :rules = "rules" ref="reply_evals" :model="reply_evals">
							<el-row :gutter="5">
								<el-col :span="8">
									<el-form-item prop="sender">
										<el-input size="small" placeholder="昵称" v-model="reply_evals.sender"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item prop="sender_email">
										<el-input size="small" placeholder="邮箱" v-model="reply_evals.sender_email"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item prop="sender_web">
										<el-input size="small" placeholder="网址：https://wwww.gsmjb.com" v-model="reply_evals.sender_web"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item prop="content">
								<el-input type="textarea" placeholder="这里输入你的评论内容~" v-model="reply_evals.content" style="margin-top:10px;" :rows="6"></el-input>
							</el-form-item>
						</el-form>
						<div class="eval-btn-box">
							<el-button size="mini" type='info' @click="toEvalReply('reply_evals',item.id);">发表评论</el-button>
						</div>
					</div>
				</div>
				<div class="eval-user" v-for="(items,keys) in item.child" style="margin-left:60px;width:calc(100% - 60px)">
					<img :src="items.sender_headimg" class="eval-user-header">
					<div class="eval-user-info">
						<div class="eval-user-nick">
							<a class="eval-user-nickname" :href="items.sender_web"  target="top">{{items.sender}} </a>
							<el-tag type="info" size="mini" class="user-badge">{{items.sender_sys}}</el-tag>
							<el-tag type="info" size="mini" class="user-badge">{{items.sender_browser}}</el-tag>
							<a href="###" class="btn-replay" @click="replys(key,keys)">{{items.reply_btn}}</a>
						</div>
						<div class="eval-user-time">
							{{items.create_time}}
						</div>
					</div>
					<div class="eval-msg">
						<p>回复：<span class="replay-user">{{items.reply_id.sender}}</span></p>
						<div v-html="items.content"></div>
					</div>
					<div class="msg-box  reply-msg-box" v-if="items.is_reply">
						<el-form :rules = "rules" ref="reply_evals"  :model="reply_evals">
							<el-row :gutter="5">
								<el-col :span="8">
									<el-form-item prop="sender">
										<el-input size="small" placeholder="昵称" v-model="reply_evals.sender"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item prop="sender_email">
										<el-input size="small" placeholder="邮箱" v-model="reply_evals.sender_email"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item prop="sender_web">
										<el-input size="small" placeholder="网址：https://wwww.gsmjb.com" v-model="reply_evals.sender_web"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item prop="content">
								<el-input type="textarea" placeholder="这里输入你的评论内容~" v-model="reply_evals.content" style="margin-top:10px;" :rows="6"></el-input>
							</el-form-item>
						</el-form>
						<div class="eval-btn-box">
							<el-button size="mini" type='info' @click="toEvalReply('reply_evals',items.id);">发表评论</el-button>
						</div>
					</div>
				</div>
			</li>
			<li class="more-eval">
				<el-button size="mini" @click="moreEval()" :loading="moreload" v-if="morebtn">{{moretext}}</el-button>
				<div style="text-align:center;font-size:12px;color:#666;margin-top:10px;" v-else>暂无更多评论</div>
			</li>
		</ul>
	</div>
</div>
<script src="/static/markdown/src/js/marked.min.js"></script>
<script src="/static/markdown/src/js/highlight.js"></script>
<script src="/static/js/vue.js"></script>
<script src="/static/js/jquery.js"></script>
<script src="/static/element/index.js"></script>
<script src="/static/js/common.js"></script>
<script src="/static/js/smooth.js"></script>
<script>
hljs.initHighlightingOnLoad();
new Vue({
	el : '#box',
	data:{
		article : {$article | raw},
		article_eval : {$article_eval | raw},
		eval : {
			sender : window.localStorage.getItem('sender'),
			sender_email : window.localStorage.getItem('email'),
			sender_web : window.localStorage.getItem('web'),
			content : '',
			reply_id : 0,
			reply_level : 0,
		},
		reply_evals : {
			sender : window.localStorage.getItem('sender'),
			sender_email : window.localStorage.getItem('email'),
			sender_web : window.localStorage.getItem('web'),
			content : '',
			reply_id : 0,
			reply_level : 0
		},
		reply_eval : false,
		eval_num : {$eval_num},
		rules:{
			sender : [
				{ required: true, message: '请输入昵称', trigger: 'blur' }
			],
			sender_email : [
				{ required: true, message: '请输入邮箱', trigger: 'blur' }
			],
			sender_web : [
				{ required: true, message: '请输入网址', trigger: 'blur' }
			],
			content : [
				{ required: true, message: '请输入评论内容', trigger: 'blur' }
			],
		},
		old_key : false,
		old_keys : false,
		page : 1,
		moretext : '更多评论',
		moreload : false,
		morebtn : true,
		evals : {$evals | raw},
		barrage_index : 0
	},
	mounted:function(){
		//判断页面是否切换
		var that = this;
		window.addEventListener("visibilitychange",function(){
			if (document.hidden) {
				clearInterval(times);
		　　	} else {
		　　		that.barrages();
		　　	}
		});
		//百度推广
		this.baidu();
		//markdown编辑器
		this.setMarkdown();
		this.barrages();
	},
	methods:{
		//回到首页
		toHome:function(){
			location.href="../";
		},
		//弹幕效果
		barrages:function(){
			var that = this;
			var arr = this.evals;
			var len = arr.length;
			if(!len) return false;
			times = setInterval(function(){
				var top = Math.ceil(Math.random()*270);
				var set_time = Math.ceil(Math.random()*2000);
				var animate_time =  randomNum(20,40);
				setTimeout(function(){
					var html = `
						<span class="barrages-item" style="top:${top};animation:barrage ${animate_time}s linear forwards;">
							<span>${arr[that.barrage_index].sender}：</span>${arr[that.barrage_index].content}</span>
					`;
					$('.barrages').append(html);
					that.barrage_index ++ ;
					if(that.barrage_index == len)that.barrage_index = 0;
				},set_time);
			},1000);
			
		},
		//回复评论
		replys:function(key,keys){
			if(this.old_key === key && this.old_keys === keys) {
				if (keys === false && this.article_eval[key].is_reply == true) {
					this.article_eval[key].is_reply = false;
					this.article_eval[key].reply_btn = '回复';
					return true;
				} else if(keys !== false && this.article_eval[key].child[keys].is_reply == true){
					this.article_eval[key].child[keys].is_reply = false;
					this.article_eval[key].child[keys].reply_btn = '回复';
					return true;
				}
				
			}
			if (this.old_key !== false) {
				if (this.old_keys === false) {
					this.article_eval[this.old_key].is_reply = false;
					this.article_eval[this.old_key].reply_btn = '回复';
				} else {
					this.article_eval[this.old_key].child[this.old_keys].is_reply = false;
					this.article_eval[this.old_key].child[this.old_keys].reply_btn = '回复';
				}
			}
			
			if (keys === false) {
				this.article_eval[key].is_reply = true;
				this.article_eval[key].reply_btn = '收起回复';
			} else {
				this.article_eval[key].child[keys].is_reply = true;
				this.article_eval[key].child[keys].reply_btn = '收起回复';
			}
			this.old_keys = keys;
			this.old_key = key;
		},
		//执行评论回复
		toEvalReply:function(formName,id){
			this.reply_evals.reply_id = id;
			this.reply_evals.reply_level = this.article_eval[this.old_key].id;
			var data = this.reply_evals;
			this.evalAjax(formName,data,false);
		},
		//执行评价
		toEval:function(formName){
			var data = this.eval;
			this.evalAjax(formName,data);
		},
		evalAjax:function(formName,data,state = true){
			var that = this;
			//获取系统版本信息
			var os = getOsSys();
			data.sender_sys = os[0];
			data.sender_browser = os[1];
			data.article_id = this.article.id;
			//保存缓存
			window.localStorage.setItem('sender',data.sender);
			window.localStorage.setItem('email',data.sender_email);
			window.localStorage.setItem('web',data.sender_web);
			var validate = state ? this.$refs[formName] : this.$refs[formName][0];
			validate.validate((valid) => {
	    		  if (valid) {
	    			  $.post("../toeval.html",data,function(res){
	    				  if (res.code) {
	    					  toastSuccess(that,res.msg,function(){
	    						  location.reload();
	    					  });
	    				  } else {
	    					  toastError(that,res.msg);
	    				  }
	    			  });
        	  } else {
        		  toastError(this,'表单信息不完整');
          	  return false;
        	 }
        });
		},
		//更多评论
		moreEval:function(){
			this.page ++;
			var that = this;
			that.moretext = '正在获取';
			that.moreload = true;
			$.post("../moreeval.html",{id : this.article.id,page : this.page},function(res){
				var len = res.msg.length;
				if (len > 0) {
					for (var i = 0 ;i < len ; i++) {
						that.article_eval.push(res.msg[i]);
					}
				} else {
					that.morebtn = false;
				}
				that.moretext = '更多评论';
				that.moreload = false;
			});
		},
		//渲染markdown样式
		setMarkdown:function(){
			var rendererMD = new marked.Renderer();
		    marked.setOptions({
		      	renderer: rendererMD,
		      	gfm: true,
		      	tables: true,
		      	breaks: false,
		      	pedantic: false,
		      	sanitize: false,
		      	smartLists: true,
		      	smartypants: false
		    });
		    marked.setOptions({
		        highlight: function (code, lang) {
		        	return (lang && hljs.getLanguage(lang)) ? hljs.highlight(lang, code).value : hljs.highlightAuto(code).value
		      	}
		    });
		    this.article.content =  marked(this.article.content);
		},
		//百度推广
		baidu:function(){
			var bp = document.createElement('script');
		    var curProtocol = window.location.protocol.split(':')[0];
		    if (curProtocol === 'https'){
		    	bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
			}else{
				bp.src = 'http://push.zhanzhang.baidu.com/push.js';
			}
		    var s = document.getElementsByTagName("script")[0];
		    s.parentNode.insertBefore(bp, s);
		},
	}
});
</script>
</body>
</html>